<!--  -->
<template>
  
    <div class="">
          <span class="titletext font15 mt10 pl10">工作设置</span>
          <van-divider hairline :style="{ padding: '0', lineHeight:'2px',margin:'5px 0 0 10px'}"/>
         <van-field
                required
                right-icon="arrow" 添加右侧图标
                input-align="left" 设置文字位置
                label-width="8.5em"  设置标题长度
                clickable
                readonly
                name="picker"  
                :value="frequencyType"
                label="思政工作频次类型:"
                placeholder="请选择"
                @click="showTypePicker = true"
            
                />
                <van-popup v-model="showTypePicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="showTypePickeronConfirm"
                    @cancel="showTypePicker = false"
                />
                </van-popup>
        <!-- 周类别选择时间       -->
        <van-field
                v-show="showstartaction==1"
                required
                right-icon="arrow" 添加右侧图标
                input-align="left" 设置文字位置
                label-width="8.5em"  设置标题长度
                clickable
                readonly
                name="picker"  
                :value="strdaydata"
                label="思政工作开始时间:"
                placeholder="请选择"
                @click="showSTRdataPicker = true"
            
                />
                <van-popup v-model="showSTRdataPicker" position="bottom">
                <van-datetime-picker
                    :formatter='formatter'
                    v-model="nowDate"
                    
                    type="date"
                    :min-date="strDate"
                    :max-date="maxDate"
                    @cancel="showSTRdataPicker = false"
                    @confirm="showSTRdataPickeronConfirm"
                    />
                </van-popup>
        <van-field
                v-show="showstartaction==1"
                required
                readonly
                right-icon="arrow" 添加右侧图标
                input-align="left" 设置文字位置
                label-width="8.5em"  设置标题长度
                clickable
                name="picker"  
                :value="enddaydata"
                label="思政工作结束时间:"
                placeholder="请选择"
                @click="showENDdataPicker = true"
            
                />
                <van-popup v-model="showENDdataPicker" position="bottom">
                   <van-datetime-picker
                        :formatter='formatter'
                        v-model="nowDate"
                        type="date"
                        :min-date="endDate"
                        :max-date="maxDate"
                        @confirm="showENDdataPickeronConfirm"
                        @cancel="showENDdataPicker = false"
                    />
        </van-popup>     
        <!-- 月度类别选择时间 -->
        <van-field
                v-show="showstartaction==2"
                required
                readonly
                right-icon="arrow" 添加右侧图标
                input-align="left" 设置文字位置
                label-width="6.5em"  设置标题长度
                clickable
                name="picker"  
                :value="strmoth"
                label="思政工作时间:"
                placeholder="请选择"
                @click="showSTRmothPicker = true"
            
                />
                <van-popup v-model="showSTRmothPicker" position="bottom">
                <van-datetime-picker
                    v-model="nowDate"
                    :formatter='formatter'
                    type="year-month"
                    :min-date="strDate"
                    :max-date="maxDate"
                    @cancel="showSTRmothPicker = false"
                    @confirm="showMonthStrpickConfirm"
                    />
                </van-popup>
         <!-- 季度类别选择时间 -->
         <van-field
                readonly
                v-show="showstartaction==3"
                required
                right-icon="arrow" 添加右侧图标
                input-align="left" 设置文字位置
                label-width="9em"  设置标题长度
                clickable
                name="picker"  
                :value="strjidu"
                label="思政工作时间(年份):"
                placeholder="请选择"
                @click="showSTRjiduPicker = true"
            
                />
                <van-popup v-model="showSTRjiduPicker" position="bottom">
                <van-datetime-picker
                    :formatter='formatter'
                    v-model="nowDate"
                    type="year"
                    :min-date="strDate"
                    :max-date="maxDate"
                    @cancel="showSTRjiduPicker = false"
                    @confirm="showSTRjiduPickeronConfirm"
                    />
                </van-popup>
          <van-field
                v-show="showstartaction==3"
                required
                readonly
                right-icon="arrow" 添加右侧图标
                input-align="left" 设置文字位置
                label-width="9em"  设置标题长度
                clickable
                name="picker"  
                :value="endjidu"
                label="思政工作时间(季度):"
                placeholder="请选择"
                @click="showENDjiduPicker = true"
            
                />
                <van-popup v-model="showENDjiduPicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="jiducolumns"
                    @confirm="showENDjiduPickeronConfirm"
                    @cancel="showENDjiduPicker = false"
                />
                </van-popup>
         <!-- 年度选择时间        -->
        <van-field
            v-show="showstartaction==4"
            required
            readonly
            right-icon="arrow" 添加右侧图标
            input-align="left" 设置文字位置
            label-width="6.5em"  设置标题长度
            clickable
            name="picker"  
            :value="stryear"
            label="思政工作时间:"
            placeholder="请选择"
            @click="showYearsPicker = true"
        
            />
            <van-popup v-model="showYearsPicker" position="bottom">
            <van-datetime-picker
                :formatter='formatter'
                v-model="nowDate"
                type="year"
                :min-date="strDate"
                :max-date="maxDate"
                @cancel="showYearsPicker = false"
                @confirm="showYearsPickeronConfirm"
                />
            </van-popup>
         <van-field
                required
                readonly
                right-icon="arrow" 添加右侧图标
                input-align="left" 设置文字位置
                label-width="6.5em"  设置标题长度
                clickable
                name="picker"  
                :value="pincivalue"
                label="思政工作频次:"
                placeholder="请选择"
                @click="showPinciPicker = true"
            
                />
                <van-popup v-model="showPinciPicker" position="bottom">
                    <van-picker
                        show-toolbar
                        :columns="pincicolumns"
                        @confirm="showPinciPickeronConfirm"
                        @cancel="showPinciPicker = false"
                    />
                </van-popup> 
          <van-field 
                readonly    
                autosize
                label-width="3.5em"
                v-model="userinfodata.truename"
                label="配置人:"
                placeholder="请输入..."
                
          />
          <van-field 
                readonly
                autosize
                label-width="4.5em"
                v-model="userinfodata.belongDepartmentName"
                label="配置部门:"
                placeholder="请输入..."
                
          />
          <van-field 
                readonly
                autosize
                label-width="4.5em"
                v-model="userinfodata.nowtime"
                label="配置时间:"
                placeholder="请输入..."
                
          />      
        <div class="footer">
            <van-button  block type="info"  @click="saveFromData()">提交</van-button>
        </div>               
    </div>
  
</template>

<script>
import {saveSzjsFromDetail} from '@/api/gettodo'
import {Toast ,Notify} from 'vant'
import {mapGetters} from 'vuex'
import moment from 'moment'
  export default {
    components: {

    },
    name:'zcxjfromdetail',
    data() {
       return {
            columns: ['周', '月度','季度','年度'],
            showTypePicker: false,
            showSTRdataPicker: false,
            showENDdataPicker: false,
            showSTRmothPicker: false,
            showSTRjiduPicker: false,
            showENDjiduPicker: false,
            showYearsPicker: false,
            showPinciPicker: false,
            pincicolumns: ['1次', '2次','3次','4次','5次','6次','7次','8次','9次','10次',],
            pincivalue: '',
            jiducolumns:['一季度','二季度','三季度','四季度'],
            frequencyType:'',
            userinfodata:{},
            strDate: new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()),
            endDate: new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()+1),
            maxDate: new Date(new Date().getFullYear()+60,new Date().getMonth(),new Date().getDate()),
            nowDate: new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()),
            strdaydata:'',
            enddaydata:'',
            strmoth:'',
            strjidu:'',
            endjidu:'',
            stryear:'',
            showstartaction:1,
            workSettings:''
       }
    },
    computed:{
        ...mapGetters(['user']),
        ...mapGetters(['userinfo']),
    },
    //生命周期--创建完成
    created() {
      
    },
    activated(){
        this.pincivalue= '',
        this.frequencyType='',
        this.strdaydata='',
        this.enddaydata='',
        this.strmoth='',
        this.strjidu='',
        this.endjidu='',
        this.stryear='',
        this.showstartaction=1,
        this.workSettings=''
        this.userinfodata = this.userinfo;
        console.log('用户信息：'+JSON.stringify(this.userinfodata))
        this.userinfodata.nowtime =moment(new Date()).format('YYYY-MM-DD');

    },
    //生命周期--挂载完成
    mounted() {
        
    },
    methods:{
         formatter(type, val) {
            if (type === 'year') {
              return `${val}年`;
            } else if (type === 'month') {
              return `${val}月`;
            } else if (type === 'day') {
              return `${val}日`;
            } else if (type === 'hour') {
              return `${val}时`;
            } else if (type === 'minute') {
              return `${val}分`;
            }
            return val;
          },
        
        showTypePickeronConfirm(value){
            // columns: ['周', '月度','季度','年度'],
            this.frequencyType=value;
            this.showTypePicker=false;
            if(this.frequencyType=='周'){
               this.showstartaction=1
            }else if(this.frequencyType=='月度'){
               this.showstartaction=2
            }else if(this.frequencyType=='季度'){
               this.showstartaction=3
            }else if(this.frequencyType=='年度'){
               this.showstartaction=4
            }else {
               this.showstartaction=1
            }
        },
        showSTRdataPickeronConfirm(value){
            // let value=new Date(values);
            // console.log(value);
            // var resultdata=new value.getFullYear()+"-"+value.getMonth()+"-"+value.getDate();
            this.strdaydata=moment(value).format('YYYY-MM-DD');
            this.showSTRdataPicker=false;
            this.endDate=new Date(value.getFullYear(), value.getMonth(), value.getDate()+1)
            this.enddaydata=""
            this.workSettings=(this.strdaydata?this.strdaydata:"")+"至"+(this.enddaydata?this.enddaydata:"")+"思政纪实工作设置"
        },
        showENDdataPickeronConfirm(value){
            this.enddaydata=moment(value).format('YYYY-MM-DD');
            this.showENDdataPicker=false;
            this.workSettings=(this.strdaydata?this.strdaydata:"")+"至"+(this.enddaydata?this.enddaydata:"")+"思政纪实工作设置"
        },
        showMonthStrpickConfirm(value){
            this.strmoth=moment(value).format('YYYY')+'年'+moment(value).format('MM')+'月';
            this.showSTRmothPicker=false;
            this.workSettings=this.strmoth+"思政纪实工作设置"
        },
        
        showSTRjiduPickeronConfirm(value){
            this.strjidu=moment(value).format('YYYY')+'年';
            this.showSTRjiduPicker=false;
            this.workSettings=(this.strjidu?this.strjidu:"")+(this.endjidu?this.endjidu:"")+"思政纪实工作设置"
        },
        showENDjiduPickeronConfirm(value){
            this.endjidu=value;
            this.showENDjiduPicker=false;
            this.workSettings=(this.strjidu?this.strjidu:"")+(this.endjidu?this.endjidu:"")+"思政纪实工作设置"
        },
        showYearsPickeronConfirm(value){
            this.stryear=moment(value).format('YYYY')+'年';
            this.showYearsPicker=false;
            this.workSettings=this.stryear+"思政纪实工作设置"
        },
        showPinciPickeronConfirm(value){
            this.pincivalue=value;
            this.showPinciPicker=false;
        },
        
        saveFromData(){ //保存数据
            
            let fromdetaildata={};
            if(this.frequencyType==undefined || this.frequencyType.length<=0){
                Notify('请选择思政工作频次类型');
                return;
            }
            fromdetaildata.frequencyType=this.frequencyType;
            if(this.frequencyType=='周'){
                if(this.strdaydata==undefined || this.strdaydata.length<=0){
                    Notify('请选择思政工作开始时间');
                    return;
                }
                if(this.enddaydata==undefined || this.enddaydata.length<=0){
                    Notify('请选择思政工作结束时间');
                    return;
                }
                fromdetaildata.startTime=this.strdaydata;
                fromdetaildata.endTime=this.enddaydata;
                fromdetaildata.month="";
                fromdetaildata.quarterly="";
                fromdetaildata.year="";

            }else if(this.frequencyType=='月度'){
                if(this.strmoth==undefined || this.strmoth.length<=0){
                    Notify('请选择思政工作时间');
                    return;
                }
                fromdetaildata.year=this.strmoth.substring(0,4);
                fromdetaildata.month=this.strmoth.substring(5,7);
                fromdetaildata.endTime="";
                fromdetaildata.startTime="";
                fromdetaildata.quarterly="";
            }else if(this.frequencyType=='季度'){
                if(this.strjidu==undefined || this.strjidu.length<=0){
                    Notify('请选择思政工作年份');
                    return;
                }
                if(this.endjidu==undefined || this.endjidu.length<=0){
                    Notify('请选择思政工作季度');
                    return;
                }
                fromdetaildata.year=this.strjidu.substring(0,4);
                fromdetaildata.quarterly=this.endjidu;
                fromdetaildata.endTime="";
                fromdetaildata.startTime="";
                fromdetaildata.month="";
            }else if(this.frequencyType=='年度'){
                if(this.stryear==undefined || this.stryear.length<=0){
                    Notify('请选择思政工作时间');
                    return;
                }
                fromdetaildata.year=this.strjidu.substring(0,4);
                fromdetaildata.endTime="";
                fromdetaildata.startTime="";
                fromdetaildata.month="";
                fromdetaildata.quarterly="";
            }
            if(this.pincivalue==undefined || this.pincivalue.length<=0){
                    Notify('请选择思政工作频次');
                    return;
            }
            fromdetaildata.frequency=this.pincivalue;    
            fromdetaildata.workSettings=this.workSettings;
            fromdetaildata.configDeptName=this.userinfodata.belongDepartmentName;
            fromdetaildata.configuration=this.userinfodata.truename;
            fromdetaildata.configTime=this.userinfodata.nowtime;
            console.log(JSON.stringify(fromdetaildata))
            Toast.loading({
                message: "提交中...",
                forbidClick: true,
            });
            saveSzjsFromDetail(Object.assign({fromdetaildata:fromdetaildata},{userName:this.user.userName}))
                .then((result)=>{
                    Toast.clear();
                    if(result.data.errcode==0){
                        Notify({type: 'success',message:'添加成功'});
                        this.$router.back()
                    }else{
                        Notify(result.message);
                    }
                }).catch(()=>{
                    Toast.clear();
                })

        }
    }
  }
</script>
<style  scoped>
/* @import url();*/
   .mt10{
       margin-top: 0px;
   }
   .onlyspanclass{
       font-size: 14px;
       margin-left: 10px;
       color: #646566;
       line-height: 24px;
   }
    
    .fileBox {
        width: 100%;
        padding-left: 15px;

    }
    .fileLink {
        display: inline-block;
        width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
        vertical-align: top;
    }
    .fileDelete {
        line-height: 20px;
        display: inline-block;
        vertical-align: top;
        margin: 0 10px;
    }
    .uploadBtn {
        margin-top: 10px;
        margin-right: 20px;
        position:relative;
        width: 100px;
        border-radius: 5px;
        background-color: #00b4f1;
        color: #fff;
        text-align: center;
        float: right;
        padding: 10px;
    }
   
</style>